<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4655080_q1bujt7yab.css">
</head>
<style>
    .hongse{
        display: flex;
        border-bottom: 1px solid black;
        justify-content: space-between;
        background-color: green;
    }

   
</style>
<body>
    <!-- <div id="box">
        <div @click="a=0"class=app>微信 <div :class="{'iconfont icon-duihao':a===0}"></div></div>
        <div @click="a=1"class=app>支付宝 <div :class="{'iconfont icon-duihao':a===1}"></div></div>
        <div @click="a=2"class=app>银联 <div :class="{'iconfont icon-duihao':a===2}"></div></div>
       
    </div> -->
    <div id="app">
         <button @click="a=0" :class="{'hongse':a===0 }">微信支付<div :class="{'iconfont icon-duihao':a===0}"></div></button>
         <button @click="a=1" :class="{'hongse':a===1 }">支付宝支付<div :class="{'iconfont icon-duihao':a===1}"></div></button>
         <button @click="a=2" :class="{'hongse':a===2  }">银行卡支付<div :class="{'iconfont icon-duihao':a===2}"></div></button>
    </div>
    
</body>
<script src="./Vue.js"></script>
<script>
    const {createApp,ref} = Vue;
createApp({

    setup(){
        let red = ref('hongse')
        let a = ref(0);
        return{
            a,
            red
    }
    }
   
}).mount('#app')

</script>
</html>